.ScreenLogin {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;

	& > .LoginBack {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	& > .ScreenLogin__Box {
		width: 634px;
		height: 400px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
		z-index: 1;

		& > .Top {
			width: 100%;
			height: 58px;
			display: flex;
			align-items: center;
			justify-content: center;

			& > img {
				flex: 1;
				height: 100%;
				display: block;
				user-select: none;
			}

			& > .TopR {
				transform: scaleX(-1);
			}
		}

		& > .Box {
			width: 100%;
			flex: 1;
			background: linear-gradient(
				45deg,
				rgba(0, 176, 187, 0.3),
				rgba(32, 30, 28, 0.3),
				rgba(32, 30, 28, 0.3)
			);
			backdrop-filter: blur(8px);
			position: relative;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 0 0 6px 6px;

			& > .Title {
				position: absolute;
				left: 0;
				top: -58px;
				width: 100%;
				height: 58px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Microsoft YaHei;
				font-weight: bold;
				font-size: 36px;
				color: #ffffff;
			}

			& > .SignUpForm {
				width: 60%;

				.ant-input-affix-wrapper {
					height: 56px;
					background-color: transparent;
					border-color: transparent;
					overflow: hidden;
					backdrop-filter: blur(4px);
					border-radius: 15px;
					box-shadow: 3px 3px 10px rgba(0, 0, 0, 1),
						-1px -1px 6px rgba(255, 255, 255, 0.4);

					&:hover,
					&:focus-within {
						box-shadow: 3px 3px 10px rgba(0, 0, 0, 1),
							-1px -1px 6px rgba(255, 255, 255, 0.4),
							inset 3px 3px 10px rgba(0, 0, 0, 1),
							inset -1px -1px 6px rgba(255, 255, 255, 0.4);

						&::after {
							left: -10%;
						}
					}

					&::after {
						position: absolute;
						content: "";
						left: 150%;
						top: 0;
						width: 120%;
						height: 100%;
						background: linear-gradient(
							90deg,
							rgba(0, 176, 187, 0.3),
							rgba(32, 30, 28, 0.4),
							rgba(32, 30, 28, 0.4)
						);
						backdrop-filter: blur(4px);
						transform: skewX(-15deg);
						transition: all 0.75s ease;
						border-radius: 6px;
						z-index: -1;
					}

					.ant-input {
						background: transparent;
						font-family: Microsoft YaHei;
						font-weight: bold;
						font-size: 18px;
						color: #00ffff;
						text-indent: 16px;

						&::placeholder {
							font-family: Microsoft YaHei;
							font-weight: 400;
							font-size: 18px;
							color: #68a3a0;
						}
					}

					.ant-input-prefix,
					.ant-input-suffix {
						color: rgba(0, 252, 255, 1);
						font-size: 24px;
						margin-right: 16px;

						& > span {
							color: rgba(0, 252, 255, 1);
						}
					}
				}

				.SignUpBtn {
					margin-bottom: 0;
					position: relative;
					z-index: 1;

					&::after {
						position: absolute;
						content: "";
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						background: rgba(0, 0, 0, 0.15);
						backdrop-filter: blur(4px);
						z-index: 1;
						pointer-events: none;
						border-radius: 15px;
					}

					button {
						position: relative;
						width: 100%;
						height: 56px;
						border-radius: 15px;
						border: 0px;
						outline: 0px;
						background: transparent;
						cursor: pointer;
						box-shadow: 3px 3px 10px rgba(0, 0, 0, 1),
							-1px -1px 6px rgba(255, 255, 255, 0.4);

						&::after,
						&::before {
							position: absolute;
							content: "";
							transition: all ease-in-out 0.35s;
							width: 64%;
							height: 72%;
							z-index: -1;
							border-radius: 15px;
							mix-blend-mode: multiply;
							-webkit-box-reflect: below 16px
								linear-gradient(
									to bottom,
									rgba(0, 0, 0, 0),
									rgba(0, 0, 0, 0.15)
								);
						}

						&::after {
							background: linear-gradient(
								-45deg,
								rgba(2, 29, 78, 0.5) 0%,
								rgba(31, 215, 232, 0.7) 60%,
								rgba(2, 29, 78, 0)
							);
							top: 4px;
							left: 4px;
						}

						&::before {
							background: linear-gradient(
								45deg,
								rgba(2, 29, 78, 0.5) 0%,
								rgba(31, 215, 232, 0.7) 60%,
								rgba(2, 29, 78, 0)
							);
							bottom: 4px;
							right: 4px;
						}

						& > span {
							position: absolute;
							display: flex;
							align-items: center;
							justify-content: center;
							left: 0;
							top: 0;
							width: 100%;
							height: 56px;
							border-radius: 15px;
							background: rgba(0, 0, 0, 0);
							font-weight: bold;
							font-size: 18px;
							color: #ffffff;
							transition: all ease-in-out 0.35s;
							z-index: 2;
							-webkit-box-reflect: below 8px
								linear-gradient(
									to bottom,
									rgba(0, 0, 0, 0),
									rgba(0, 0, 0, 0.15)
								);
						}

						&.ant-btn-loading,
						&:hover {
							&::after,
							&::before {
								width: calc(100% - 8px);
								height: calc(100% - 8px);
								border-radius: 15px;
							}

							& > span {
								font-size: 24px;
							}
						}
					}
				}
			}
		}

		& > .Back {
			position: absolute;
			z-index: -1;
			width: 634px;
			height: 150px;
			margin-top: 58px;
			background: linear-gradient(
				45deg,
				rgba(0, 131, 126, 0),
				rgba(32, 30, 28, 0),
				rgba(0, 131, 126, 0)
			);
			backdrop-filter: blur(8px);
			transform: skewY(15deg);
			border-radius: 6px;
			transition: all 1.35s;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			overflow: hidden;
			animation: BACK 10s ease-in-out 2s infinite;

			& > .item {
				position: absolute;
				background-color: transparent;
				width: calc(var(--i) * 28px);
				aspect-ratio: 1;
				border-radius: 50%;
				border: 5px solid rgb(0, 200, 255);
				transform-style: preserve-3d;
				transform: rotateX(70deg) translateZ(50px);
				animation: my-move 4s ease-in-out calc(var(--i) * 0.15s) infinite;
				box-shadow: 0px 0px 15px rgb(124, 124, 124),
					inset 0px 0px 15px rgb(124, 124, 124);
			}

			@keyframes BACK {
				0%,
				100% {
					transform: skewY(15deg);
				}

				50% {
					transform: skewY(-15deg);
				}
			}

			@keyframes my-move {
				0%,
				100% {
					transform: rotateX(70deg) translateZ(50px) translateY(0px);
					filter: hue-rotate(0deg);
				}

				50% {
					transform: rotateX(70deg) translateZ(50px) translateY(-50vmin);
					filter: hue-rotate(180deg);
				}
			}
		}

		&:hover {
			& > .Box {
				&::after {
					top: 10px;
					left: -160px;
					background: linear-gradient(
						-45deg,
						rgba(0, 176, 187, 0.3),
						rgba(0, 176, 187, 0.1)
					);
					backdrop-filter: blur(8px);
				}

				&::before {
					top: 240px;
					right: -160px;
					background: linear-gradient(
						-45deg,
						rgba(0, 176, 187, 0.3),
						rgba(0, 176, 187, 0.1)
					);
					backdrop-filter: blur(8px);
				}
			}

			& > .Back {
				height: 342px;
				transform: skewY(0);
				animation: none;
				background: linear-gradient(
					45deg,
					rgba(0, 131, 126, 0.3),
					rgba(32, 30, 28, 0),
					rgba(0, 131, 126, 0.3)
				);
			}
		}
	}
}
